<template>
  <a-card hoverable :bordered="false" :style="{ width: '100%', marginBottom: '10px' }">
    <div class="kjdh">
        <div class="kjdh_title">
            <div class="kjdh_title_left">
                快捷导航
            </div>
            <icon-left-circle style="font-size:20px; color:#68C1B2;" @click="pre"/>
            <div style="font-size:16px; margin:0 6px;"> {{ nowPage }} /{{ countPage }} </div>
            <icon-right-circle style="font-size:20px; color:#68C1B2;" @click="next"/>
        </div>
        <div style="height:220px; margin-top:10px;">
            <a-row>
                <a-col :span="6" v-for="(item,i) in list.slice((nowPage - 1) * 8, (((nowPage - 1) * 8) + 8))" :key="i">
                    <div class="kjdh_item" @click="toPath(item.path)">
                        <div class="kjdh_item_icon">
                            <a-image width="60" :src="item.icon" />
                            <!-- <icon-user size="40" :src="item.icon" style="color:#2BE5E9;"/> -->
                        </div>
                        <div>{{item.name}}</div>
                    </div>
                </a-col>
            </a-row>
        </div>
    </div>
  </a-card>
</template>
<script setup>
     import { ref, onMounted } from 'vue'
      import { useAppStore, useUserStore } from '@/store'
      
  import { useRoute, useRouter } from 'vue-router'
    import dhflImg from '@/assets/dhfl.png'
    import fhddImg from '@/assets/fhdd.png'
    import zxrwImg from '@/assets/zxrw.png'
    import thdImg from '@/assets/thd.png'
    import mrjjbImg from '@/assets/mrjjb.png'
    import khglImg from '@/assets/khgl.png'
    import htglImg from '@/assets/htgl.png'
const nowPage = ref(1)
const pre = () => {
    if(nowPage.value == 1){
        return;
    }
    nowPage.value--;
}
const countPage = ref(1)
const next = () => {
    if(nowPage.value == countPage.value){
        return;
    }
    nowPage.value++;
}
  const route = useRoute()
  const router = useRouter()
  const rawList = ref([
            {
                name:'到货预报',
                roles:['superAdmin','dzzy','yunshuyuan','yybzg','boss'],
                path:'/prediction/manage',
                icon:dhflImg
            },
            {
                name:'发货预报',
                roles:['superAdmin','dzzy','yunshuyuan','yybzg','boss'],
                path:'/send/manage',
                icon:fhddImg
            },
            {
                name:'装卸任务',
                roles:['superAdmin','yunshuyuan','yybzg'],
                path:'/prediction/load',
                icon:zxrwImg
            },
            {
                name:'提货单',
                roles:['superAdmin','dzzy','yunshuyuan','yybzg','boss'],
                path:'/prediction/order',
                icon:thdImg
            },
            {
                name:'每日交接表',
                roles:['superAdmin','dzzy','yunshuyuan','yybzg','boss','caiwu'],
                path:'/ledger/dailyHandover',
                icon:mrjjbImg
            },
            {
                name:'客户管理',
                roles:['superAdmin','dzzy','yunshuyuan','yybzg','caiwu'],
                path:'/financial/financeLedger',
                icon:khglImg
            },
            {
                name:'合同管理',
                roles:['superAdmin','dzzy','yunshuyuan','yybzg','caiwu'],
                path:'/system/userContract',
                icon:htglImg
            },
            {
                name:'应收款',
                roles:['superAdmin','caiwu'],
                path:'/financial/accountsReceivable',
                icon:dhflImg
            },
            {
                name:'应付款',
                roles:['superAdmin','caiwu'],
                path:'/financial/accountsPayable',
                icon:dhflImg
            },
            {
                name:'发货派车单',
                roles:['superAdmin','psgs'],
                path:'/send/form',
                icon:dhflImg
            },
            {
                name:'数据面板',
                roles:['superAdmin','boss'],
                path:'/dashboard',
                icon:dhflImg
            }
        ])
        const list = ref([])
        const roles = ref('')
        const userStore = useUserStore()
        onMounted(()=>{
            roles.value = userStore.roles[0]
            init()
      })
      const toPath = (e) => {
        router.push({
            path:e
        })
      }
    const init = () => {
        rawList.value.forEach(e => {
            if(e.roles.includes(roles.value)){
                list.value.push(e)
            }
        })
        countPage.value = list.value.length > 0 ? Math.ceil(list.value.length / 8) : 1
    }
</script>
<style scoped>
.kjdh{
    height:270px;
}
.kjdh_title {
    display: flex;
    align-items: center;
    justify-content:space-between;
    height:40;
}
.kjdh_title_left {
    flex:1;
    font-family: PingFang SC;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    color:#000000;
    padding:2px 10px;
    border-left:5px solid #68C1B2;
}
.kjdh_item{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    width:100%;
    margin-top:20px;
    font-size: 14px;
}
.kjdh_item_icon{
    /* background: linear-gradient(155.47deg, #FFFFFF 9.19%, #BBF1F2 92.16%); */
    width:60px;
    height:60px;
    border-radius: 20px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content: center;
}
</style>
